import React, { memo, useState } from 'react'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import HYThemeCover from '@/components/theme-cover';
import HYPagination from '@/components/pagination'
import { SongListWrapper } from './style'
import { PER_PAGE_NUMBER } from '../../store/contants'

import { getSongList } from '../../store/actionCreators'

export default memo(function HYSongsList () {
  const [currentPage, setCurrentPage] = useState(1)

  const { categorySongs } = useSelector(state => ({
    categorySongs: state.getIn(['songs', 'categorySongs'])
  }), shallowEqual);
  const songList = categorySongs.playlists || [];
  const total = categorySongs.total || 0;
  const dispatch = useDispatch();
  function onPageChange (page, pageSize) {
    setCurrentPage(page);
    dispatch(getSongList(page));
  }
  return (
    <SongListWrapper>
      <div className="songs-list">
        {
          songList.map((item, index) => {
            return (
              <HYThemeCover info={item} key={item.id} right="30px" />
            )
          })
        }
      </div>
      <HYPagination
        currentPage={currentPage}
        total={total}
        pageSize={PER_PAGE_NUMBER}
        onPageChange={onPageChange}
      />
    </SongListWrapper>
  )
})
